fix(web): frontend polish pass — overview, AI pages, design pages (v3.3) by mmorerasanchez · Pull Request #55 · mmorerasanchez/democrito

mmorerasanchez · 2026-05-25T22:56:27Z

What

Editorial and visual polish pass across the full site.

Changes

Overview: copy rewrite (hero, Why, How), spacing fix, accent on stat numbers, permanent section arrows, sidebar breathing room, sentence case sweep
Manifesto: opening quote removed, body text softened to muted
Design pages: category jump nav + component count on Atoms, Molecules, Tokens, Templates
AI pages: Claude badge, section renames, Stitch cleanup, Replit/Lovable extra prompts, Terminal rename, instruction file table updated

Quality

Lint: clean
Tests: 83/83 passing (verified across all 8 prompt sessions)

Summary by CodeRabbit

New Features
- Added category jump navigation to design system pages for easier browsing.
- Included registry link in quick start installation guide.
- Expanded AI instruction pages with new prompt examples and customization guidance.
Documentation
- Added comprehensive frontend fixes workflow documentation.
- Updated technology stack reference to reflect latest tooling.
Improvements
- Restructured page layouts and content organization across multiple sections.
- Enhanced manifesto page styling and typography.
- Rebranded GitHub distribution card to Terminal.
- Added component and token counts to overview pages.

…(v3.3) - Hero subtitle: font-body text-base (matches AI + Manifesto), new colon/semicolon copy - Why section: atoms link → bradfrost.com/chapter-2, updated para 3 - How: rewritten subtitle - Heading: Customize with your brand + updated card descs - Summary: accent on numbers, lighter labels, permanent section arrows - registry.json link below shadcn registry block - Sidebar: pt-4 → pt-6 - Design principles → sentence case - Stats labels: sentence case, no uppercase tracking - QuickStartSection titles: shadcn registry, Git clone, Manual download Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Remove opening blockquote (closing quote at page end kept) - PageMeta description updated - Body paragraphs: text-foreground → text-muted-foreground Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Atoms: 10 atoms · 4 categories + 4-pill jump nav - Molecules: 18 molecules · 4 categories + 4-pill jump nav - Tokens: 90+ tokens subtext - Templates: 7 templates subtext Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

- Claude: badge → Claude, section renames, remove verbose explanations, Projects section removed (Note kept standalone), expanded taste prompts - Vibe coding: section renames, Lovable/Replit extra prompts, Stitch cleanup, token mapping merged into Other vibe coding platforms - Terminal: card rename GitHub→Terminal in AiPage + OverviewPage, remove How CLAUDE.md works, table updated (not-in-repo flags, DESIGN.md + docs/design-system.md rows added), Docs section expanded Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-05-25T22:56:33Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
democrito	Ready	Preview, Comment	May 25, 2026 10:56pm

coderabbitai · 2026-05-25T22:56:39Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7b27bc67-9736-40aa-8e1c-bfd9e5e8d72a

📥 Commits

Reviewing files that changed from the base of the PR and between 65dd49b and c7f8be9.

📒 Files selected for processing (14)

docs/claude-code-prompts-frontend-fixes.md
skill/democrito/SKILL.md
src/components/AppSidebar.tsx
src/components/organisms/ai/QuickStartSection.tsx
src/pages/AiPage.tsx
src/pages/AtomsPage.tsx
src/pages/ManifiestoPage.tsx
src/pages/MoleculesPage.tsx
src/pages/OverviewPage.tsx
src/pages/TemplatesPage.tsx
src/pages/TokensPage.tsx
src/pages/ai/claude.tsx
src/pages/ai/github.tsx
src/pages/ai/vibe-coding.tsx

📝 Walkthrough

Walkthrough

This PR implements a coordinated "frontend fixes v3.3" workflow across the design system landing and catalog pages, updating hero content, adding category navigation, restructuring the manifesto, and refining AI page guidance. The changes include a comprehensive prompt documentation guide, Tailwind v4 version bump, and UI adjustments across multiple pages.

Changes

Frontend Fixes v3.3: Landing, Catalog & AI Pages

Layer / File(s)	Summary
Documentation Guide & Tech Stack `docs/claude-code-prompts-frontend-fixes.md`, `skill/democrito/SKILL.md`	Added comprehensive "frontend fixes v3.3" prompt workflow documentation detailing 8 sequential prompts across all affected pages, and updated Tailwind CSS from v3 to v4.
Overview Page Hero & Content Sections `src/pages/OverviewPage.tsx`	Rewrote hero subtitle to a new `<p>` element, expanded "Why" narrative with new emphasis and external atomic-design link, updated "How" lead-in and heading to "Customize with your brand", adjusted stats labels casing, and added `ArrowRight` icons to section links with "Design principles" heading normalization.
Overview Page AI Paths & Descriptions `src/pages/OverviewPage.tsx`	Updated Claude and Terminal (renamed from GitHub) path entries with revised descriptions, labels, and badges reflecting new focus on context file attachment and brand customization.
Category Jump Navigation Across Catalog Pages `src/pages/AtomsPage.tsx`, `src/pages/MoleculesPage.tsx`, `src/pages/TemplatesPage.tsx`, `src/pages/TokensPage.tsx`	Added category arrays and top-of-page navigation sections to Atoms (10 atoms · 4 categories), Molecules (18 molecules · 4 categories), and summary counts for Templates (7 templates) and Tokens (90+ tokens).
Manifesto Page Meta & Opening Structure `src/pages/ManifiestoPage.tsx`	Updated PageMeta JSON-LD description to "Why design systems still matter in the age of AI generation" and removed opening pull-quote blockquote, restructuring the introduction section markup.
Manifesto Page Content & Text Styling `src/pages/ManifiestoPage.tsx`	Restructured body paragraphs across Evidence, Last Twelve Months, Gap, democrito, and closing sections with `text-muted-foreground` styling, split narrative blocks into multiple paragraphs, and preserved link wrapping within new grouping.
Claude Page Sections & Prompts `src/pages/ai/claude.tsx`	Renamed badge from "Anthropic" to "Claude", updated section labels ("Inspect context files", "Install the context in your project"), added "Files to add to Project knowledge" note, and replaced "Claude Projects setup" with "Customize with your brand" and "Play with your taste" sections featuring expanded prompt examples.
GitHub Page Instruction Ecosystem & Docs `src/pages/ai/github.tsx`	Revised instruction-file ecosystem section 2 intro, updated table rows with "not yet in repo" indicators, added `DESIGN.md` entry, renamed "AGENTS.md" label, and restructured docs section to highlight `docs/design-system.md` as a key file with new "Docs" section title.
Vibe Coding Page Sections & Customization `src/pages/ai/vibe-coding.tsx`	Renamed "Lovable" section with added brand-direction prompt, removed Stitch section preamble notes, removed Step 2 verification details, renamed "Replit" section with customization snippet, and flattened "Other vibe coding platforms" by removing nested sub-section wrapper.
Component Layout & Navigation Updates `src/components/AppSidebar.tsx`, `src/components/organisms/ai/QuickStartSection.tsx`, `src/pages/AiPage.tsx`	Increased AppSidebar top padding from `pt-4` to `pt-6`, updated QuickStartSection path labels to lowercase and added conditional registry.json external link for recommended paths, and renamed AiPage GitHub card to "Terminal" with badge swap.

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly Related PRs

mmorerasanchez/democrito#48: Introduces calibration, Stitch, token mapping, and AGENTS.md content on /ai pages that this PR directly refines with section restructuring and prompt updates.
mmorerasanchez/democrito#34: Overlaps on src/pages/OverviewPage.tsx modifications including hero tagline, stats/sections UI styling, and content updates.
mmorerasanchez/democrito#26: Directly modifies the same src/pages/ManifiestoPage.tsx content and structure, including blockquote handling and narrative restructuring.

Poem

🐰 A rabbit's whisper through the fixes—
Hero subtitles dance in new syntax,
Categories leap with anchor-bound clicks,
While manifesto paragraphs find softer tints,
AI pages bloom with fresher prompts and cheer! 🌱✨

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/frontend-fixes-v3.3

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

mmorerasanchez and others added 6 commits May 25, 2026 21:04

fix(skill): correct Tailwind CSS version to v4 in tech stack list

e39cf9b

fix(manifesto): remove opening quote, body text muted (v3.3)

4c56e45

- Remove opening blockquote (closing quote at page end kept) - PageMeta description updated - Body paragraphs: text-foreground → text-muted-foreground Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs: add frontend fixes prompt spec (v3.3)

c7f8be9

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel Bot deployed to Preview May 25, 2026 22:56 View deployment

mmorerasanchez merged commit f00c46d into main May 25, 2026
3 of 4 checks passed

mmorerasanchez deleted the fix/frontend-fixes-v3.3 branch May 25, 2026 22:57

coderabbitai Bot mentioned this pull request Jun 2, 2026

fix(theme): sidebar drawer through tablet, persistent rail only at xl #61

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(web): frontend polish pass — overview, AI pages, design pages (v3.3)#55

fix(web): frontend polish pass — overview, AI pages, design pages (v3.3)#55
mmorerasanchez merged 6 commits into
mainfrom
fix/frontend-fixes-v3.3

mmorerasanchez commented May 25, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented May 25, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 25, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Possibly Related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

mmorerasanchez commented May 25, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Changes

Quality

Summary by CodeRabbit

Uh oh!

vercel Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented May 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Possibly Related PRs

Poem

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

mmorerasanchez commented May 25, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented May 25, 2026 •

edited

Loading

coderabbitai Bot commented May 25, 2026 •

edited

Loading